import React from 'react';
import { View, Text } from '@ray-js/ray';
import { Cell, CellGroup, DialogInstance, Switch, BottomSheet } from '@ray-js/smart-ui';
import Strings from '../../i18n';
import styles from './index.module.less';

interface Props {
  onChange: (params: Record<string, any>) => void;
  dpId: string;
  dps: Record<string, any>;
  style?: React.CSSProperties;
  title?: string;
}

export default ({ style = {}, onChange, dpId, dps, title }: Props) => {
  const onClick = v => {
    onChange &&
      onChange({
        ...dps,
        [dpId]: v,
      });
  };

  const list = ['open', 'close'].map(item => ({
    name: Strings.getLang(item),
    id: item,
    checked: item === dps[dpId],
    className: styles.actionSheetItem,
  }));

  const onCancel = () => setShow(false);
  const onClose = () => setShow(false);
  const onSelect = evt => {
    const { id } = evt.detail;
    console.log(`🚀 id`, id);

    // publishDps({
    //   [title]: id,
    // });

    onClick(id);
    // const newActions = actions.map(item => {
    //   if (item.id === id) return { ...item, checked: true };
    //   return { ...item, checked: false };
    // });
    // setActions(newActions);
  };

  const [show, setShow] = React.useState(false);

  const [isReady, setIsReady] = React.useState(false);

  const value = dps[dpId];

  const chanegCd = value => {
    onClick(value);
  };

  const toggleBottomSheet = React.useCallback(() => setShow(!show), [show]);

  const renderCd = () => {
    return (
      <View className={styles.modeContainer}>
        <View className={styles.titleBox}>
          {isReady && (
            <Text className={styles.text}>
              {Strings.getLang(title ?? Strings.getLang('control'))}
            </Text>
          )}
        </View>

        <View className={styles.cdBox}>
          <Text className={styles.text}>{0}%</Text>
          {isReady && (
            <Slider
              minTrackRadius="13px"
              maxTrackRadius="13px"
              minTrackHeight="18px"
              maxTrackHeight="18px"
              value={value}
              maxTrackColor="#D5D5D5"
              thumbBorderStyle="8rpx solid #4E93FA"
              thumbWidth={22}
              thumbHeight={22}
              max={100}
              min={0}
              enableTouch
              // onChange={value => chanegCd(value)}
              onAfterChange={value => chanegCd(value)}
              style={{
                width: `500rpx`,
                zIndex: 1000,
                position: 'relative',
              }}
            />
          )}
          <Text className={styles.text}>{100}%</Text>
        </View>
      </View>
    );
  };

  return (
    <View style={style ?? {}}>
      <Cell
        title={title ?? Strings.getLang('control')}
        customClass={styles.noteCell}
        value={dps[dpId] + '%'}
        onClick={() => {
          setShow(true);
        }}
      />
      <BottomSheet
        show={show}
        onClose={() => {
          toggleBottomSheet();
        }}
        onAfterEnter={() => setIsReady(true)}
        onBeforeLeave={() => setIsReady(false)}
      >
        <View
          style={{
            minHeight: '140px',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#fff',
          }}
        >
          {renderCd()}
        </View>
      </BottomSheet>
    </View>
  );
};
